<template>
  <div class='largeDataScreen'>
    <div class='content'>
      <!-- 顶部图时间和成交额 -->
      <div class='top_area'>
        <div class='time' v-if="endTimeHours">
          <span class='text'>活动结束倒计时:</span> <span class='time1'>{{endTimeHours}}</span>:<span class='time1'>{{endMinutes}}</span>:<span class='time1'>{{endSeconds}}</span>
        </div>
        <!-- | numberFilter -->
        <div class='title1'><img src="https://image.hezongyy.com/pcimage/20211109img/sjdp_h5_jrcje.png" alt=""></div>
        <div class='price'><span class='tip'>{{getStatus()}}</span><span class='flip'></span></div>
        <img src="https://image.hezongyy.com/pcimage/20211109img/sjdp_h5_bj.jpg" alt="" />
      </div>
      <!-- pc_h5 成交额统计 -->
      <div class='pc_and_h5_area'>
        <div class='left'>
          <img src="https://image.hezongyy.com/pcimage/20211109img/sjdp_h5_bjpc.jpg" alt="">
          <div class='pc_and_h5_bolck'>
            <div class='row1'>成交额：</div>
            <div class='row2'><span>￥</span><span class='flip1'></span></div>
            <div class='row3'>浏览量(pv):{{h5PCPvUv.pcPv| numberFilter}}</div>
            <div class='row3'>访客量(uv):{{h5PCPvUv.pcUv| numberFilter}}</div>
          </div>
        </div>
        <div class='right'>
          <img src="https://image.hezongyy.com/pcimage/20211109img/sjdp_h5_bjh5.jpg" alt="">
          <div class='pc_and_h5_bolck'>
            <div class='row1'>成交额：</div>
            <div class='row2'><span>￥</span><span class='flip2'></span></div>
            <div class='row3'>浏览量(pv):{{h5PCPvUv.appPv| numberFilter}}</div>
            <div class='row3'>访客量(uv):{{h5PCPvUv.appUv| numberFilter}}</div>
          </div>
        </div>
      </div>
      <!-- 高峰时刻累计成交额 -->
      <div class='gfsk_area'>
        <!-- <div class='goTip'></div>
         <div class='goTip1'></div> -->
        <div class='title'><img src="https://image.hezongyy.com/pcimage/20211109img/sjdp_h5_gfsk.png" alt=""></div>
        <div class='gfsk_block'>
          <div class='gfsk_block_title'>
            <div class='row1'>时间</div>
            <div class='row2'>订单数</div>
            <div class='row3'>成交额</div>
          </div>
          <div class='data_row' v-for="(item ,index ) of peakTimeList" :key='index'>
            <img src="https://image.hezongyy.com/pcimage/20211109img/sjdp_h5_gfskbj.png" alt="">
            <div class='row_block'>
              <div class='row1'>{{item.time}}</div>
              <div class='row2'>{{item.userCount}}</div>
              <div class='row3'>￥{{item.gmv | numberFilter}}</div>
            </div>
          </div>
        </div>

      </div>
      <!-- //省内区域分布情况 -->
      <div class='snqy_map_area'>
        <div class='title'><img src="https://image.hezongyy.com/pcimage/20211109img/sjdp_h5_snqy.png" alt=""></div>
        <div class='map_bg'><img src="https://image.hezongyy.com/pcimage/20211109img/h5_sjdp_map_bg.png" alt=""></div>
        <Map />
      </div>
      <!-- //省内盟友情况 -->
      <div class='snqy_area'>
        <div class='title'><img src="https://image.hezongyy.com/pcimage/20211109img/apph5_sjdp_mylx.png" alt=""></div>
        <div class='snqy_area_block'>
          <div class='data_row' v-for="(item ,index ) of allyGmvList" :key='index'>
            <!-- <div class='img1' v-if="index%2!==0"> <img src="https://image.hezongyy.com/pcimage/20211109img/sjdp_jm_dx.png" alt=""></div>
            <div class='img2' v-else> <img src="https://image.hezongyy.com/pcimage/20211109img/sjdp_jm_dx1.png" alt=""> </div> -->
            <div class='row_block_area'>
              <div class='row_block'>
                <div class='row' id='outer'>
                  <div class='row_block_row1'>
                    <div>{{item.gmvWithUnit}}</div>
                    <div style="font-size:18px">(万元)</div>
                  </div>
                </div>
                <div class='row2'>{{item.name}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 底部感谢观看 -->
      <div class='bottom_area'>
        <img src="https://image.hezongyy.com/pcimage/20211109img/sjdp_h5_bottom.jpg" alt="">
        <!-- <canvas id="canvas1" style=" height: 280px; position: absolute;
    top: 90px;
    left: 0px;
    right: 0px;"> </canvas> -->
      </div>
    </div>

    <!-- //遮罩 -->
    <div class='dialog' v-if="showDialog">
      <canvas id="canvas">
      </canvas>
      <div class='canvas_bg'>
        <img src="  https://image.hezongyy.com/pcimage/20211109img/h5_sjdp_djs.jpg" alt="">
      </div>
      <div class='time' v-if="hours">
        <span class='time1'>{{hours}}</span> : <span class='time1'>{{minutes}}</span> : <span class='time1'>{{seconds}}</span>
      </div>
    </div>
    <!-- <div class='item11' style="color:#fff;width:200px;height:200px"></div> -->
  </div>
</template>
<script>
//引入保存所有接口的url文件
import url from '../../../axios/apiUrl'
//引入api.js定义的方法index
import { postRequest } from '../../../api/index'
import { getRequest } from '../../../api/indexGet'
import Map from './Map'
import NumberFlipS from '@/config/NumberFlipS.js'
import NumberFlip from '@/config/NumberFlip.js'

export default {
  components: {
    Map,
  },
  data() {
    return {
      showDialog: false,
      nowTime: '',
      startTime: '',
      endTime: '',
      endTimeHours: '',
      endMinutes: '',
      endSeconds: '',
      hours: '',
      minutes: '',
      seconds: '',
      h5PCPvUv: {},
      peakTimeList: [],
      allyGmvList: [],
      isFirst: true, //是否第一次
      isFirstallyGmvList: true, //是否盟友是否第一次
      shareUrl: this.routerURL + 'largeDataScreen', //分享地址
      item: '',
    }
  },
  created() {
    this.isH5OrWindow()
    this.idOnlineOrOffline()
  },
  beforeDestroy() {
    clearInterval(this.timeN)
    clearInterval(this.timeName)
    clearInterval(this.curTime)
    clearTimeout(this.terminalPvUvTimer)
    clearTimeout(this.peakTimeTimer)
    clearTimeout(this.allyGmvTimer)
    clearTimeout(this.timeTimer)
  },
  async mounted() {
    // pc_h5 成交额统计
    await this.terminalPvUv()
    //  119数据大屏对外 对外（高峰时刻累计成交 板块3）
    await this.peakTime()
    // 119数据大屏对外（盟友成交查询 板块5）
    await this.allyGmv()
    // 119数据大屏 对外（倒计时 板块1）
    await this.countDown()
    this.init()
    this.next()
    this.loadWX()
    // this.getDialog1()
  },
  methods: {
    //判断断网情况
    idOnlineOrOffline() {
      var el = document.body
      let this_ = this
      if (el.addEventListener) {
        window.addEventListener(
          'online',
          function () {
            this_.terminalPvUv()
            this_.peakTime()
            this_.allyGmv()
            this_.countDown()
          },
          true
        )
        window.addEventListener(
          'offline',
          function () {
            this_.$toast({
              message: '当前的网络环境较差或无连接，请检查网络后重新刷新界面~',
              duration: 5000,
            })
          },
          true
        )
      } else if (el.attachEvent) {
        window.attachEvent('ononline', function () {
          this_.terminalPvUv()
          this_.peakTime()
          this_.allyGmv()
          this_.countDown()
        })
        window.attachEvent('onoffline', function () {
          this_.$toast({
            message: '当前的网络环境较差或无连接，请检查网络后重新刷新界面~',
            duration: 5000,
          })
        })
      } else {
        window.ononline = function () {}
        window.onoffline = function () {
          this_.$toast({
            message: '当前的网络环境较差或无连接，请检查网络后重新刷新界面~',
            duration: 5000,
          })
        }
      }
    },

    //自适应手机和电脑，根据星号跳转链接
    isH5OrWindow() {
      //判断手机类型
      if (/android/i.test(navigator.userAgent)) {
        // 安卓手机
      } else if (/iphone/i.test(navigator.userAgent)) {
        //  苹果手机
      } else if (/ipad|mac/i.test(navigator.userAgent)) {
        //  苹果ipad ,mac
        window.open('https://119.hezongyy.com/foreignData', '_blank')
      } else {
        window.open('https://119.hezongyy.com/foreignData', '_blank')
      }
    },

    //状态文字
    getStatus() {
      if (this.item) {
        return '￥'
      } else {
        return '计算中...'
      }
    },
    //wx微信分享
    async loadWX() {
      let res = await postRequest(url.authorize, { url: this.shareUrl })
      if (res.data.code == '000000') {
        wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: res.data.content.appId, // 必填，公众号的唯一标识
          timestamp: res.data.content.timestamp, // 必填，生成签名的时间戳
          nonceStr: res.data.content.nonceStr, // 必填，生成签名的随机串
          signature: res.data.content.signature, // 必填，签名，见附录1
          jsApiList: ['updateAppMessageShareData'], // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        })
        wx.ready(() => {
          if (wx.updateAppMessageShareData) {
            wx.updateAppMessageShareData({
              title: '2021年合纵119嘉年华', // 分享时的标题
              link: this.shareUrl, // 分享时的链接 // keyi
              imgUrl:
                'https://image.hezongyy.com/pcimage/20211109img/sjdp_fx_img.jpg', // 分享时的图标
              desc: '期待2022年1109，与您共创行业巅峰....',
              success: function (n) {
                console.log('分享成功', n)
              },
              complete: function (n) {
                console.log(n)
              },
            })
          } else {
            wx.onMenuShareAppMessage({
              title: '2021年合纵119嘉年华', // 分享时的标题
              link: this.shareUrl, // 分享时的链接 // keyi
              imgUrl:
                'https://image.hezongyy.com/pcimage/20211109img/sjdp_fx_img.jpg', // 分享时的图标
              desc: '期待2022年1109，与您共创行业巅峰....',
              success: function (n) {
                console.log('分享成功', n)
              },
              complete: function (n) {
                console.log(n)
              },
            })
          }
        })
        wx.error(function (res) {})
      }
    },

    //初始化数据
    init() {
      this.item = new NumberFlipS('.flip', String(this.h5PCPvUv.totalGmv))
      this.item1 = new NumberFlip('.flip1', String(this.h5PCPvUv.pcGmv))
      this.item2 = new NumberFlip('.flip2', String(this.h5PCPvUv.appGmv))
    },
    next() {
      // console.log(this.h5PCPvUv.totalGmv)
      this.item.next(String(this.h5PCPvUv.totalGmv))
      this.item1.next(String(this.h5PCPvUv.pcGmv))
      this.item2.next(String(this.h5PCPvUv.appGmv))
    },

    // 119数据大屏 对外（倒计时 板块1）
    async countDown() {
      let res = await getRequest(url.countDown)
      if (res.data.code == '000000') {
        this.nowTime = res.data.content.nowTime
        this.startTime = res.data.content.startTime
        this.endTime = res.data.content.endTime
        // this.nowTime = 1634287318784
        // this.startTime = 1634287327784
        if (this.startTime > this.nowTime) {
          this.showDialog = true
          await this.$nextTick()
          this.getDialog()
        }
      }
      if (res.data.message == '系统异常') {
        this.$toast('网络异常，请稍后再试')
      }
      await this.$nextTick()
      this.timeTimer = setTimeout(() => {
        this.countDown()
      }, 30000)
      await this.getEndTime()
      await this.getNowTime()
      await this.countDownInit()
    },

    // 119数据大屏 对外（ pc_h5 成交额统计 板块1）
    async terminalPvUv() {
      let res = await getRequest(url.terminalPvUv)
      if (res && res.data.code == '000000') {
        // 如果是第一次请求
        if (this.isFirst) {
          this.h5PCPvUv = res.data.content
          this.isFirst = false // 第一次请求进了，把这里设置为false，以后都不进来了
        } else {
          this.h5PCPvUv.appGmv = res.data.content.appGmv || this.h5PCPvUv.appGmv
          this.h5PCPvUv.appPv = res.data.content.appPv || this.h5PCPvUv.appPv
          this.h5PCPvUv.appUv = res.data.content.appUv || this.h5PCPvUv.appUv
          this.h5PCPvUv.pcGmv = res.data.content.pcGmv || this.h5PCPvUv.pcGmv
          this.h5PCPvUv.pcPv = res.data.content.pcPv || this.h5PCPvUv.pcPv
          this.h5PCPvUv.pcUv = res.data.content.pcUv || this.h5PCPvUv.pcUv
          this.h5PCPvUv.totalGmv =
            res.data.content.totalGmv || this.h5PCPvUv.totalGmv
        }
      }
      if (res.data.message == '系统异常') {
        this.$toast('网络异常，请稍后再试')
      }

      this.terminalPvUvTimer = setTimeout(() => {
        this.terminalPvUv()
        this.next()
      }, 1500)
    },
    //  119数据大屏对外 对外（高峰时刻累计成交 板块3）
    async peakTime() {
      let res = await getRequest(url.peakTime)
      if (res && res.data.code == '000000') {
        this.peakTimeList = res.data.content
      }
      if (res.data.message == '系统异常') {
        this.$toast('网络异常，请稍后再试')
      }
      this.peakTimeTimer = setTimeout(() => {
        this.peakTime()
      }, 4000)
    },
    // 119数据大屏对外（盟友成交查询 板块5）
    async allyGmv() {
      let res = await getRequest(url.allyGmv)
      if (res.data.code == '000000') {
        if (this.isFirstallyGmvList) {
          this.allyGmvList = res.data.content
          this.isFirstallyGmvList = false // 第一次请求进了，把这里设置为false，以后都不进来了
        } else {
          for (let i = 0; i < this.allyGmvList.length; i++) {
            this.allyGmvList[i].gmv =
              res.data.content[i].gmv || this.allyGmvList[i].gmv
          }
        }
      }
      if (res.data.message == '系统异常') {
        this.$toast('网络异常，请稍后再试')
      }
      this.allyGmvTimer = setTimeout(() => {
        this.allyGmv()
      }, 4000)
    },
    // 获取当前时间
    countDownInit() {
      clearInterval(this.curTime)
      this.curTime = setInterval(() => {
        this.nowTime = this.nowTime + 1000
      }, 1000)
    },
    // 计算时间
    getNowTime() {
      this.timeName = setInterval(() => {
        //计算距离本场开始剩余时间
        // 结束时间时间戳
        if (this.startTime - this.nowTime > 0) {
          this.hours = Math.floor(
            ((this.startTime - this.nowTime) / 1000 / 60 / 60) % 24
          )
          // 判断小时是否大于24小时
          if (this.startTime - this.nowTime > 86400000) {
            let num = parseInt((this.startTime - this.nowTime) / 86400000)
            this.hours = num * 24 + this.hours
          }
          this.minutes = Math.floor(
            ((this.startTime - this.nowTime) / 1000 / 60) % 60
          )
          this.seconds = Math.floor(
            ((this.startTime - this.nowTime) / 1000) % 60
          )
          if (this.hours < 10) {
            this.hours = '0' + this.hours
          }
          if (this.minutes < 10) {
            this.minutes = '0' + this.minutes
          }
          if (this.seconds < 10) {
            this.seconds = '0' + this.seconds
          }
        } else {
          this.hours = '00'
          this.minutes = '00'
          this.seconds = '00'
          this.showDialog = false
        }
      }, 1000)
    },
    // 计算时间
    getEndTime() {
      this.timeN = setInterval(() => {
        //计算距离本场开始剩余时间
        // 结束时间时间戳
        if (this.endTime - this.nowTime > 0) {
          this.endTimeHours = Math.floor(
            ((this.endTime - this.nowTime) / 1000 / 60 / 60) % 24
          )
          // 判断小时是否大于24小时
          if (this.endTime - this.nowTime > 86400000) {
            let num = parseInt((this.endTime - this.nowTime) / 86400000)
            this.endTimeHours = num * 24 + this.endTimeHours
          }
          this.endMinutes = Math.floor(
            ((this.endTime - this.nowTime) / 1000 / 60) % 60
          )
          this.endSeconds = Math.floor(
            ((this.endTime - this.nowTime) / 1000) % 60
          )
          if (this.endTimeHours < 10) {
            this.endTimeHours = '0' + this.endTimeHours
          }
          if (this.endMinutes < 10) {
            this.endMinutes = '0' + this.endMinutes
          }
          if (this.endSeconds < 10) {
            this.endSeconds = '0' + this.endSeconds
          }
        } else {
          this.endTimeHours = '00'
          this.endMinutes = '00'
          this.endSeconds = '00'
        }
      }, 1000)
    },

    getDialog1() {
      var _createClass = (function () {
        function defineProperties(target, props) {
          for (var i = 0; i < props.length; i++) {
            var descriptor = props[i]
            descriptor.enumerable = descriptor.enumerable || false
            descriptor.configurable = true
            if ('value' in descriptor) descriptor.writable = true
            Object.defineProperty(target, descriptor.key, descriptor)
          }
        }
        return function (Constructor, protoProps, staticProps) {
          if (protoProps) defineProperties(Constructor.prototype, protoProps)
          if (staticProps) defineProperties(Constructor, staticProps)
          return Constructor
        }
      })()
      function _classCallCheck(instance, Constructor) {
        if (!(instance instanceof Constructor)) {
          throw new TypeError('Cannot call a class as a function')
        }
      }
      var Line = (function () {
        function Line(x, y, size, color, speed, seed, amplitude) {
          _classCallCheck(this, Line)
          this.x = x
          this.y = y
          this.size = size
          this.color = color
          this.speed = speed
          this.seed = seed
          this.amplitude = amplitude
          this.i = this.seed
        }
        _createClass(Line, [
          {
            key: 'update',
            value: function update() {
              this.y -= this.speed
              this.i += this.seed
            },
          },
          {
            key: 'draw',
            value: function draw(canvas) {
              var x = this.x + Math.sin(this.i) * this.amplitude

              canvas.ctx.beginPath()
              canvas.ctx.fillStyle = this.color
              canvas.ctx.shadowColor = this.color
              canvas.ctx.shadowBlur = 5
              canvas.ctx.arc(x, this.y, this.size, 0, 2 * Math.PI)
              canvas.ctx.fill()
              canvas.ctx.closePath()
            },
          },
        ])
        return Line
      })()
      var Canvas = (function () {
        function Canvas(ctx, w, h) {
          _classCallCheck(this, Canvas)
          this.ctx = ctx
          this.width = w
          this.height = h
          this.scale = 1.0
          this.lines = []
        }
        _createClass(Canvas, [
          {
            key: 'pushParticle',
            value: function pushParticle() {
              var x = Math.random() * this.width
              var y = this.height + Math.random() * 250
              var size = 1 + Math.random()

              var g = Math.floor(0 + Math.random() * 50)
              var b = Math.floor(0 + Math.random() * 50)
              var color = 'rgba(0,229,251,0.3)'

              var speed = 2 + Math.random() * 1.5
              var seed = Math.random() / 20
              var amp = Math.random() * 1

              this.lines.push(new Line(x, y, size, color, speed, seed, amp))
            },
          },
          {
            key: 'start',
            value: function start() {
              for (var i = 0; i < 100; i++) {
                this.pushParticle()
              }
            },
          },
          {
            key: 'update',
            value: function update() {
              for (var i = 0; i < this.lines.length; i++) {
                var line = this.lines[i]

                line.update()
              }

              this.lines = this.lines.filter(function (line) {
                return line.y > -2
              })

              var toAdd = 100 - this.lines.length

              if (toAdd === 0) {
                return
              }

              for (var _i = 0; _i < toAdd; _i++) {
                this.pushParticle()
              }
            },
          },
          {
            key: 'draw',
            value: function draw() {
              this.ctx.shadowColor = '#000'
              this.ctx.shadowBlur = 0
              this.ctx.globalCompositeOperation = 'destination-out'
              // this.ctx.fillStyle = 'rgba(255, 255, 255, 0.05)'
              this.ctx.fillRect(0, 0, this.width, this.height)
              this.ctx.globalCompositeOperation = 'lighter'

              for (var i = 0; i < this.lines.length; i++) {
                var line = this.lines[i]

                line.draw(this)
              }
            },
          },
        ])
        return Canvas
      })()

      ;(function (_) {
        var canvasElement = document.getElementById('canvas1'),
          ctx = canvasElement.getContext('2d'),
          canvas = new Canvas(ctx)
        var w = (canvasElement.width = window.innerWidth),
          h = (canvasElement.height = window.innerHeight),
          density = 1

        function setup() {
          window.addEventListener('resize', resize)

          density =
            window.devicePixelRatio != undefined ? window.devicePixelRatio : 1.0

          canvasElement.width = w * density
          canvasElement.height = h * density
          canvas.width = w
          canvas.height = h
          canvas.scale = density

          ctx.scale(density, density)

          canvas.start()

          draw()
        }

        function draw() {
          canvas.update()
          canvas.draw()

          window.requestAnimationFrame(draw)
        }

        function resize() {
          w = canvasElement.width = window.innerWidth
          h = canvasElement.height = window.innerHeight
          canvasElement.width = w * density
          canvasElement.height = h * density

          canvas.width = w
          canvas.height = h

          ctx.scale(density, density)
        }

        setup()
      })()
    },
    //遮罩样式
    getDialog() {
      var _createClass = (function () {
        function defineProperties(target, props) {
          for (var i = 0; i < props.length; i++) {
            var descriptor = props[i]
            descriptor.enumerable = descriptor.enumerable || false
            descriptor.configurable = true
            if ('value' in descriptor) descriptor.writable = true
            Object.defineProperty(target, descriptor.key, descriptor)
          }
        }
        return function (Constructor, protoProps, staticProps) {
          if (protoProps) defineProperties(Constructor.prototype, protoProps)
          if (staticProps) defineProperties(Constructor, staticProps)
          return Constructor
        }
      })()
      function _classCallCheck(instance, Constructor) {
        if (!(instance instanceof Constructor)) {
          throw new TypeError('Cannot call a class as a function')
        }
      }
      var Line = (function () {
        function Line(x, y, size, color, speed, seed, amplitude) {
          _classCallCheck(this, Line)
          this.x = x
          this.y = y
          this.size = size
          this.color = color
          this.speed = speed
          this.seed = seed
          this.amplitude = amplitude
          this.i = this.seed
        }
        _createClass(Line, [
          {
            key: 'update',
            value: function update() {
              this.y -= this.speed
              this.i += this.seed
            },
          },
          {
            key: 'draw',
            value: function draw(canvas) {
              var x = this.x + Math.sin(this.i) * this.amplitude

              canvas.ctx.beginPath()
              canvas.ctx.fillStyle = this.color
              canvas.ctx.shadowColor = this.color
              canvas.ctx.shadowBlur = 5
              canvas.ctx.arc(x, this.y, this.size, 0, 2 * Math.PI)
              canvas.ctx.fill()
              canvas.ctx.closePath()
            },
          },
        ])
        return Line
      })()
      var Canvas = (function () {
        function Canvas(ctx, w, h) {
          _classCallCheck(this, Canvas)
          this.ctx = ctx
          this.width = w
          this.height = h
          this.scale = 1.0
          this.lines = []
        }
        _createClass(Canvas, [
          {
            key: 'pushParticle',
            value: function pushParticle() {
              var x = Math.random() * this.width
              var y = this.height + Math.random() * 250
              var size = 1 + Math.random()

              var g = Math.floor(0 + Math.random() * 50)
              var b = Math.floor(0 + Math.random() * 50)
              var color = 'rgba(244,' + g + ',' + b + ',0.7)'

              var speed = 2 + Math.random() * 1.5
              var seed = Math.random() / 20
              var amp = Math.random() * 1

              this.lines.push(new Line(x, y, size, color, speed, seed, amp))
            },
          },
          {
            key: 'start',
            value: function start() {
              for (var i = 0; i < 100; i++) {
                this.pushParticle()
              }
            },
          },
          {
            key: 'update',
            value: function update() {
              for (var i = 0; i < this.lines.length; i++) {
                var line = this.lines[i]

                line.update()
              }

              this.lines = this.lines.filter(function (line) {
                return line.y > -2
              })

              var toAdd = 100 - this.lines.length

              if (toAdd === 0) {
                return
              }

              for (var _i = 0; _i < toAdd; _i++) {
                this.pushParticle()
              }
            },
          },
          {
            key: 'draw',
            value: function draw() {
              this.ctx.shadowColor = '#000'
              this.ctx.shadowBlur = 0
              this.ctx.globalCompositeOperation = 'destination-out'
              this.ctx.fillStyle = 'rgba(0, 0, 0, 0.05)'
              this.ctx.fillRect(0, 0, this.width, this.height)
              this.ctx.globalCompositeOperation = 'lighter'

              for (var i = 0; i < this.lines.length; i++) {
                var line = this.lines[i]

                line.draw(this)
              }
            },
          },
        ])
        return Canvas
      })()

      ;(function (_) {
        var canvasElement = document.getElementById('canvas'),
          ctx = canvasElement.getContext('2d'),
          canvas = new Canvas(ctx)
        var w = (canvasElement.width = window.innerWidth),
          h = (canvasElement.height = window.innerHeight),
          density = 1

        function setup() {
          window.addEventListener('resize', resize)

          density =
            window.devicePixelRatio != undefined ? window.devicePixelRatio : 1.0

          canvasElement.width = w * density
          canvasElement.height = h * density
          canvas.width = w
          canvas.height = h
          canvas.scale = density

          ctx.scale(density, density)

          canvas.start()

          draw()
        }

        function draw() {
          canvas.update()
          canvas.draw()

          window.requestAnimationFrame(draw)
        }

        function resize() {
          w = canvasElement.width = window.innerWidth
          h = canvasElement.height = window.innerHeight

          canvasElement.width = w * density
          canvasElement.height = h * density

          canvas.width = w
          canvas.height = h

          ctx.scale(density, density)
        }

        setup()
      })()
    },
  },
  filters: {
    numberFilter(value) {
      if (!value) return '0'
      let newValue = value.toString().replace(/\d+/, function (n) {
        return n.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
      })
      return newValue
    },
  },
}
</script>
<style lang="less" scoped src='./index.less'>
</style>